<script lang="ts">
	import Dialog, { Title, Content, Actions } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import { createEventDispatcher } from 'svelte';
	import { createMessage } from '$components/basic/message';

	let open = true;
	const dispatch = createEventDispatcher();
	const cancel = () => {
		open = false;
		dispatch('cancel');
	};
	const confirm = async () => {
		open = false;
		const instance = createMessage({ loading: true, message: 'Loading...', type: 'light' });
		await dispatch('confirm');
		instance.update_loading_to_success();
	};

	export let content: string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc id aliquet
			tincidunt, nisl nunc tincidunt nunc, id lacinia nunc nunc id nunc. Sed euismod, nunc id
			aliquet tincidunt, nisl nunc tincidunt nunc, id lacinia nunc nunc id nunc.`;
	export let title: string = 'Dialog Title';
</script>

<Dialog bind:open aria-labelledby="simple-title" aria-describedby="simple-content">
	<Title>{title}</Title>
	<Content>
		<p>
			{content}
		</p>
	</Content>
	<Actions>
		<Button on:click={cancel}>
			<Label>No</Label>
		</Button>
		<Button on:click={confirm}>
			<Label>Yes</Label>
		</Button>
	</Actions>
</Dialog>
